{% extends "Base.html" %}
{% load static %}
{% block pagetitle %} 主页{% endblock %}
{% block paget1 %}active{% endblock %}
{% block page1 %}<span class="sr-only">(current)</span>{% endblock %}

{% block content %}

    <div class="mycontainer">

        <!-- 选项卡 -->
        <ul class="nav nav-tabs mynav">
            <li class="nav-item myiterm">
                <a class="nav-link mylink" data-toggle="tab" href="#menu">热点首页</a>
            </li>
            <li class="nav-item myiterm">
                <a class="nav-link mylink" data-toggle="tab" href="#menu1">新闻资讯</a>
            </li>
            <li class="nav-item myiterm">
                <a class="nav-link mylink" data-toggle="tab" href="#menu2">预告片</a>
            </li>
        </ul>


        <!-- 选项卡对应内容 -->
        <div class="tab-content" style="margin-bottom: 200px">
            <div class="tab-pane active container" id="menu" style="width:100%">
                <style>
                    /* Make the image fully responsive */
                    .carousel-inner img {
                        width: 100%;
                        height: 100%;
                        float: right;
                    }
                </style>
                <div id="demo" class="carousel slide" data-ride="carousel" style="margin-top: 3%;width:100%">

                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                        <li data-target="#demo" data-slide-to="3"></li>
                        <li data-target="#demo" data-slide-to="4"></li>
                    </ul>

                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="{% static "imag/5.jpg" %}">
                        </div>
                        <div class="carousel-item">
                            <img src="{% static "imag/2.jpg" %}">
                        </div>
                        <div class="carousel-item">
                            <img src="{% static "imag/3.jpg" %}">
                        </div>
                        <div class="carousel-item">
                            <img src="{% static "imag/4.jpg" %}">
                        </div>
                        <div class="carousel-item">
                            <img src="{% static "imag/1.jpg" %}">
                        </div>
                    </div>

                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>
                <div class="row myrow" style="width:100%">
                    <div class="col-6">

                        <div class="hotIndex-container"
                             style="font-size: 18px;color: #f55c47;font-family: 'Corbel Light'">
                            <ol>
                                <h4 class="red" style="color: red;font-size: 50px;margin-top: 3%;">热门资讯</h4>
                                <li class="top1-list">
                                    <div>

                                        <p class="top10-news-content">
                                            <a href="http://ent.ynet.com/2021/02/09/3138463t1254_2.html"
                                               class="two-line" style="color: #f55c47;font-family: 'Corbel Light'"
                                               title="CINITY独家AMR 120帧《唐人街探案3》大年初一上映" target="_blank"
                                            >
                                                CINITY独家AMR 120帧《唐人街探案3》大年初一上映
                                            </a>
                                        </p>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'">《你好，李焕英》片尾曲MV发布，留下春节里妈妈的美好瞬间</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="https://www.sohu.com/a/449024032_99904092" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'"
                                                >迪士尼《寻龙传说》确认引进，超飒女战士即将燃爆银幕！</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="https://www.bilibili.com/read/cv9490100/" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'"
                                                >林建焕导演电影《继承人》评估7.8分超平台90%剧本8万B+</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="https://baijiahao.baidu.com/s?id=1689296237545450961&wfr=spider&for=pc"
                                                   target="_blank" style="color: #f55c47;font-family: 'Corbel Light'">《非正式爱情》官宣定档3月14日
                                                    白色情人节为爱解惑</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="https://new.qq.com/omn/20210209/20210209A0E5RB00.html"
                                                   target="_blank" style="color: #f55c47;font-family: 'Corbel Light'">《唐人街探案3》“防剧透”特别视频
                                                    唐探家族温馨提示勿剧透</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'">《你好，李焕英》曝“阖家沸腾”版预告
                                                    贾玲沈腾开启快乐源泉</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'">《白蛇2：青蛇劫起》首曝概念海报
                                                    联动《哪吒重生》献片尾彩蛋</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">
                                                <a href="" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'">抗癌厨房摇钱草红色泳衣穆桂英刺梨剧本，爱奇艺电影评估一键焕发</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div>
                                        <div class="normal-link">
                                            <p class="top10-news-content">

                                                <a href="" target="_blank"
                                                   style="color: #f55c47;font-family: 'Corbel Light'">《唐人街探案3》“防剧透”特别视频


                                                    唐探家族温馨提示勿剧透</a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            </ol>

                        </div>
                    </div>


                    <div class="col-6">
                        <div class="latest-container">
                            <h4 class="latest-header red" style="color: indianred;font-size: 50px;margin-top: 3%;">
                                最新资讯
                            </h4>

                            <div class="latest-content clearfix" style="margin-bottom: 5%;margin-top:5%;">
                                <div class="media">
                                    <img src="https://p0.meituan.net/movie/5a2e654a0388a8d2730a3ae71a5251a41138461.jpg@465w_258h_1e_1c"
                                         class="mr-3" alt="..." style="width: 250px">
                                    <div class="media-body">
                                        <a href="https://baijiahao.baidu.com/s?id=1702872046323384924&wfr=spider&for=pc" target="_blank"> 了不起的老爸》公映看点全解锁，口碑特辑笑泪齐飞</a>
                                    </div>
                                </div>
                            </div>
                            <div class="latest-content clearfix" style="margin-bottom: 5%;margin-top:5%;">
                                <div class="media">
                                    <img src="https://image11.m1905.cn/uploadfile/2021/0608/20210608031051427725.jpg"
                                         class="mr-3" alt="..." style="width: 250px">
                                    <div class="media-body">
                                        <a href="https://www.1905.com/news/20210608/1524972.shtml"target="_blank"> 《黑白魔女库伊拉》获好评 艾玛·斯通颠覆自我</a>
                                    </div>
                                </div>
                            </div>
                            <div class="latest-content clearfix" style="margin-bottom: 5%;margin-top:5%;">
                                <div class="media">
                                    <img src="https://image11.m1905.cn/uploadfile/2020/0731/thumb_1_554_312_20200731101441703132.jpg"
                                         class="mr-3" alt="..." style="width: 250px">
                                    <div class="media-body">
                                        <a href="https://www.1905.com/news/20210617/1526483.shtml"target="_blank"> 《1921》发布制作特辑 主创深挖史料还原时代细节</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane container myc" id="menu1" style="width:100%">
                <div class="row" style="height: 400px;width:100%;">
                    <div class="col-7">

                        <img src="{% static "imag/7.jpg" %}" class="myimg" alt="非凡父子"
                             style="width:300px;height: 180px;position: absolute;left: 10px;top: 60px;">

                        <a href="#" class="mytext"
                           style="color:white;position:absolute;width:300px;  left:10px; top:200px;overflow:hidden;text-overflow:ellipsis; white-space: nowrap;">“每一部电影都有价值！”中小成本电影发行模式的新探索。</a>
                        <img src="{% static "imag/8.jpg" %}" class="myimg" alt="速度与激情9"
                             style="width:300px;height: 365px;position: absolute;left: 320px;top: 60px;">

                        <a href="#" class="mytext"
                           style="color:white;position:absolute;  width:300px;left:320px; top:380px;overflow:hidden;text-overflow:ellipsis; white-space: nowrap;">《速度与激情9》发布终极预告
                            “速激”家族马力全开</a>

                        <img src="{% static "imag/9.jpg" %}" class="myimg" alt="永远是少年"
                             style="width:300px;height: 180px;position:absolute; left:10px; top:220px;margin-top: 5%;">
                        <a href="#" class="mytext"
                           style="color:white;position:absolute;  width:300px;left:10px; top:380px;overflow:hidden;text-overflow:ellipsis; white-space: nowrap;">红色青春电影《永远是少年》
                            5月15日全国院线上映</a>

                    </div>

                    <div class="col">
                        <div>
                            <h4 style="color: red;margin-top:5%;">热门预告片</h4>
                            <ul>
                                <div class="card" style="width:300px;margin-left:3%;background-color: transparent;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;top:80px;left:150px"></a>
<a>《人之怒》0510《人之怒》曝“复仇”版预告：杰森·斯坦森卧底安保公司找内鬼</a>

                        </div>

                                 <div class="card" style="width:300px;margin-left:3%;background-color: transparent;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;top:80px;left:150px"></a>
<a>《人之怒》0510《人之怒》曝“复仇”版预告：杰森·斯坦森卧底安保公司找内鬼</a>

                        </div>
                            </ul>
                        </div>
                    </div>


                </div>
                <div class="row" style="height: 200px;width:80%;left:10px;top:480px;margin-top:6%;margin-bottom:1%;">
                    <div class="container mt-3">
                        <div class="media">
                            <img src="{% static "imag/11.jpg" %}"
                                 style="width:200px">
                            <div class="media-body">
                                <h4>多年之后才重新看懂《情书》 「爱与告别」都要用一生体会</h4>
                                <a href="" style="overflow:hidden;">
                                    从一场季风开始，我怀念一次温柔的洗礼，给我青春给我四季，给我一生永恒的记忆”，我们总是把青春与过往都温柔地存放在心底，记忆深处的那个身影随着时间反而愈发清晰，那些柔情百转未说出口的话最后成为了一生的遗憾。“青</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="height: 200px;width:80%;left:10px;top:100px;margin-bottom:1%;">
                    <div class="container mt-3">
                        <div class="media">
                            <img src="{% static "imag/11.jpg" %}"
                                 style="width:200px">
                            <div class="media-body">
                                <h4>多年之后才重新看懂《情书》 「爱与告别」都要用一生体会</h4>
                                <a href="">从一场季风开始，我怀念一次温柔的洗礼，给我青春给我四季，给我一生永恒的记忆”，我们总是把青春与过往都温柔地存放在心底，记忆深处的那个身影随着时间反而愈发清晰，那些柔情百转未说出口的话最后成为了一生的遗憾。“青

                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="height: 250px;width:80%;left:10px;top:480px;margin-bottom:1%;">
                    <div class="container mt-3">
                        <div class="media">
                            <img src="{% static "imag/11.jpg" %}"
                                 style="width:200px">
                            <div class="media-body">
                                <h4>多年之后才重新看懂《情书》 「爱与告别」都要用一生体会</h4>
                                <a href="">
                                    从一场季风开始，我怀念一次温柔的洗礼，给我青春给我四季，给我一生永恒的记忆”，我们总是把青春与过往都温柔地存放在心底，记忆深处的那个身影随着时间反而愈发清晰，那些柔情百转未说出口的话最后成为了一生的遗憾。“青</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane container" id="menu2" style="width:100%">
                <div class="container preview">
                    <div class="row" style="margin-bottom: 3%;margin-top:3%;">
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>
                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>
                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>
                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="row" style="margin-bottom: 3%;margin-top:3%;">
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>

                            <div class="card-body" style="height:40px">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>

                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>

                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 3%;margin-top:3%;">
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>

                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>

                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                        <div class="card" style="width:300px;margin-left:3%;">
                            <img class="card-img-top" src="{% static "imag/11.jpg" %}" alt="Card image">
                            <a href=""><img class="card-img-top" src="{% static "imag/play.png" %}" alt="Card image"
                                            style="width:30px;height:30px;position:absolute;left:130px;top:80px"></a>

                            <div class="card-body">
                                <a class="card-text" style="color:black;">《黑白魔女库伊拉》艾玛·斯通、艾玛·汤普森诠释时尚界的王者之争
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

{% endblock %}